<template>
  <div class="ruler">
    <div class="corner corner-lt"></div>
    <div class="corner corner-lb" :style="{ top: height + 15 + 'px' }"></div>
    <div class="corner corner-rt" :style="{ left: width + 15 + 'px' }"></div>
    <div
      class="corner corner-rb"
      :style="{ left: width + 15 + 'px', top: height + 15 + 'px' }"
    ></div>
    <div class="ruler-h-t" :style="{ width: width + 'px' }">
      <span
        class="divideh-h-t"
        v-for="num in hArray"
        :key="num"
        :style="{ left: num + 2 + 'px' }"
      >
        {{ num }}
      </span>
    </div>
    <div
      class="ruler-h-b"
      :style="{
        width: width + 'px',
        top: height + 15 + 'px',
      }"
    >
      <span
        class="divideh-h-b"
        v-for="num in hArray"
        :key="num"
        :style="{ left: num + 2 + 'px' }"
      >
        {{ num }}
      </span>
    </div>
    <div class="ruler-v-l" :style="{ height: height + 'px' }">
      <span
        class="divideh-v-l"
        v-for="num in vArray"
        :key="num"
        :style="{ top: num + 2 + 'px' }"
      >
        {{ num }}
      </span>
    </div>
    <div
      class="ruler-v-r"
      :style="{
        height: height + 'px',
        left: width + 15 + 'px',
      }"
    >
      <span
        class="divideh-v-r"
        v-for="num in vArray"
        :key="num"
        :style="{ top: num + 2 + 'px' }"
      >
        <span>{{ num }}</span>
      </span>
    </div>
  </div>
</template>
<script>
import { divideRuler } from "../tools/DesignUtils";
export default {
  props: {
    width: {
      type: [Number],
      default: () => {
        return 1920;
      },
    },
    height: {
      type: [Number],
      default: () => {
        return 1080;
      },
    },
  },
  computed: {
    hArray() {
      return divideRuler(this.width);
    },
    vArray() {
      return divideRuler(this.height);
    },
  },
};
</script>
<style lang="stylus">
.ruler {
  .corner {
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    box-sizing: border-box;
    position: absolute;
  }

  .corner-lt {
    top: 0;
    left: 0;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
  }

  .corner-lb {
    left: 0;
    border-left: 1px solid #000000;
    border-bottom: 1px solid #000000;
  }

  .corner-rt {
    top: 0;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
  }

  .corner-rb {
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
  }

  .ruler-h-t {
    height: 15px;
    position: absolute;
    top: 0;
    background: url('@import ~@/assets/images/ruler-h.png') repeat-x;
    border-right: 1px solid #000;
    box-sizing: border-box;

    .divideh-h-t {
      font-size: 8px;
      position: absolute;
    }
  }

  .ruler-h-b {
    height: 15px;
    position: absolute;
    background: url('@import ~@/assets/images/ruler-h.png') repeat-x;
    transform: rotateX(180deg);
    border-right: 1px solid #000;
    box-sizing: border-box;

    .divideh-h-b {
      font-size: 8px;
      position: absolute;
      transform: rotateX(180deg);
    }
  }

  .ruler-v-l {
    width: 15px;
    position: absolute;
    left: 0;
    background: url('@import ~@/assets/images/ruler-v.png') repeat-y;
    border-bottom: 1px solid #000;
    box-sizing: border-box;

    .divideh-v-l {
      font-size: 8px;
      position: absolute;
      writing-mode: vertical-lr;
    }
  }

  .ruler-v-r {
    width: 15px;
    position: absolute;
    background: url('@import ~@/assets/images/ruler-v.png') repeat-y;
    transform: rotateY(180deg);
    border-bottom: 1px solid #000;
    box-sizing: border-box;

    .divideh-v-r {
      width: 15px;
      height: 15px;
      display: inline-block;
      font-size: 8px;
      position: absolute;
      transform: rotateY(-180deg);

      span {
        width: 100%;
        height: 100%;
        line-height: 12px;
        display: inline-block;
        position: absolute;
        transform: rotate(90deg);
      }
    }
  }
}
</style>